import React, { FC, useMemo } from "react";
import { PieChart, Pie, ResponsiveContainer, Tooltip } from "recharts";
import { QuestionRadioStatPropsType } from "./interface";
const StatComponent: FC<QuestionRadioStatPropsType> = ({ stat = [] }:QuestionRadioStatPropsType) => {
  const sum = useMemo(() => {
    let sum = 0;
    stat.forEach((i) => {
      sum += i.count;
    });
    return sum;
  }, [stat]);
  return (
    <div style={{ width: "300px", height: "400px" }}>
      <ResponsiveContainer width="100%" height="100%">
        <PieChart width={400} height={400}>
          <Pie
            data={stat}
            dataKey="count"
            cx="50%"
            cy="50%"
            outerRadius={50}
            fill="#8884d8"
            label={(i) => `${i.name}:${((i.count / sum) * 100).toFixed(2)}%`}
          />
          <Tooltip></Tooltip>
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
};

export default StatComponent;
